<template>
    <div class="city">
        <div class="left">
            <div>
                <p>热门城市</p>
                <p>
                    <span>北京</span>
                    <span>上海</span>
                    <span>天津</span>
                    <span>合肥</span>
                    <span>郑州</span>
                </p>
            </div>
            <div>
                <p>A</p>
                <p>阿克苏</p>
                <p>安康</p>
                <p>安庆</p>
            </div>
            <div>
                <p>B</p>
                <p>白山</p>
                <p>白城</p>
                <p>宝鸡</p>
            </div>
            <div>
                <p>C</p>
                <p>沧州</p>
                <p>长春</p>
                <p>昌吉</p>
            </div>
            <div>
                <p>D</p>
                <p>大理</p>
                <p>大连</p>
                <p>大庆</p>
            </div>
            <div>
                <p>E</p>
                <p>鄂尔多斯</p>
                <p>恩施</p>
                <p>鄂州</p>
            </div>
        </div>
        <div class="right">
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>E</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'City'
    }
</script>

<style scoped>
    .city {
        display: flex;
        justify-content: space-between;
        padding-bottom: 50px;
    }

    .left {
        width: 95%;
        background-color: #fff5f0;
    }

    .left div {
        /* margin-top: 10px; */
        /* padding: 10px 0; */
    }

    .left div:first-child p span {
        display: inline-block;
        border: 1px solid #ccc;
        background-color: white;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        text-indent: 0px;
        margin-right: 10px;
    }

    .left div:first-child p:last-child {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        width: 80%;
        height: 100px;
        margin-left: 10px;
    }

    .left div p {
        text-indent: 10px;
    }

    .left div p:first-child {
        background-color: #f0f0f0;
        height: 30px;
        line-height: 30px;
    }

    .right {
        /* width: 5%;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center; */
        position: fixed;
        top: 50%;
        right: 2px;
    }
</style>